<template>
	<a-layout>
		<a-layout-content style="background: #fff">
			<a-page-header>
				<template slot="extra">
					<a-tooltip>
						<template slot="title"> 刷新页面 </template>
						<a-button @click="fetch(searchParams)">
							<a-icon type="reload" />
						</a-button>
					</a-tooltip>
					<a-button type="primary" @click="systemAreaTypeEdit()">
						<a-icon type="plus" />
						添加
					</a-button>
				</template>
				<template slot="title"> 分类管理 </template>
			</a-page-header>

			<div style="margin: 0 16px">
				<a-form-model layout="inline">
					<a-form-model-item>
						<a-select
							v-model="formInline.status"
							style="width: 120px"
							placeholder="请选择状态"
							allow-clear
							@change="queryForm"
						>
							<a-select-option :value="1"> 状态：正常 </a-select-option>
							<a-select-option :value="0"> 状态：停用 </a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item>
						<a-input-search
							v-model="formInline.searchkey"
							placeholder="名称或标识"
							allow-clear
							@search="queryForm"
						>
							<a-button slot="enterButton"> 查询 </a-button>
						</a-input-search>
					</a-form-model-item>
				</a-form-model>
			</div>

			<div style="margin: 10px 16px 0 16px">
				<systemAreaTypeTable
					:columns="columns"
					:data="data"
					:pagination="pagination"
					:loading="loading"
					@action="systemAreaTypeAction"
					@change="handleTableChange"
				/>
			</div>
		</a-layout-content>

		<edit
			v-model="systemAreaTypeVisible"
			:item="systemAreaType"
			@change="fetch(searchParams)"
		/>

		<systemAreaList v-model="systemAreaVisible" :item="systemAreaType" />
	</a-layout>
</template>
<script>
	import systemAreaType from "@/api/systemAreaType"

	export default {
		components: {
			systemAreaTypeTable: () => import("./table"),
			edit: () => import("./edit"),
			systemAreaList: () => import("../systemArea/list"),
		},
		data() {
			return {
				//分类管理
				systemAreaTypeVisible: false,
				systemAreaVisible: false,
				systemAreaType: undefined,

				//查询条件
				formInline: {
					searchkey: undefined,
					status: 1,
				},

				//列表数据
				data: [],
				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showSizeChanger: true,
					// hideOnSinglePage: true,
					showTotal: (total) => `总 ${total} 条`,
				},
				loading: false,
				searchParams: undefined,
				columns: [
					{
						title: "ID",
						dataIndex: "id",
						key: "id",
						width: 200,
						sorter: true,
						scopedSlots: { customRender: "id" },
					},
					{
						title: "类型",
						dataIndex: "type_class_show",
						key: "type_class_show",
						sorter: true,
						width: 100,
						scopedSlots: { customRender: "type_abbreviation" },
					},
					{
						title: "名称",
						dataIndex: "type_name",
						key: "type_name",
						sorter: true,
						scopedSlots: { customRender: "type_name" },
					},
					{
						title: "操作",
						dataIndex: "action",
						key: "action",
						width: 160,
						scopedSlots: { customRender: "action" },
					},
				],
			}
		},
		mounted() {
			this.$emit("menu", "/home/system-area-type/list")
			this.queryForm()
		},
		methods: {
			queryForm() {
				this.data = []
				this.pagination.current = 1
				this.handleTableChange(this.pagination, {}, {})
			},
			handleTableChange(pagination, filters, sorter) {
				let orderBy = ""
				if (
					sorter.field &&
					sorter.order &&
					sorter.field !== "" &&
					(sorter.order === "descend" || sorter.order === "ascend")
				) {
					let tmp = sorter.field.split(".")
					orderBy += tmp[tmp.length - 1]
					if (sorter.order === "descend") {
						orderBy += " desc"
					}
				}
				if (orderBy) {
					this.formInline["order_by"] = orderBy
				}

				this.fetch({
					...filters,
					...this.formInline,

					pageSize: pagination.pageSize,
					page: pagination.current,
				})
			},
			async fetch(params = {}) {
				this.data = []
				this.loading = true
				this.searchParams = params
				await systemAreaType
					.query(params)
					.then((response) => {
						if (response.code !== 1) {
							this.$message.warning(response.message)
							return
						}

						if (response.page) {
							this.pagination.current = response.page["page"]
							this.pagination.pageSize = response.page["pageSize"]
							this.pagination.total = response.page["totalSize"]
							this.pagination.totalPage = response.page["totalPage"]
						}

						if (response.data && response.data.length > 0) {
							this.data = response.data
						}

						return
					})
					.catch((e) => {
						console.log(e)
					})
				this.loading = false
			},
			//======================分类管理================================

			systemAreaTypeAction(type, item) {
				if (type == "delete") {
					this.systemAreaTypeDelete(item)
					return
				}
				if (type == "edit") {
					this.systemAreaTypeEdit(item)
					return
				}
				if (type == "child") {
					this.systemAreaType = item
					this.systemAreaVisible = true
				}
			},
			systemAreaTypeEdit(item) {
				this.systemAreaType = item
				this.systemAreaTypeVisible = true
			},
			systemAreaTypeDelete(item) {
				if (!item || !item.id) return
				systemAreaType.delete(item.id).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.$message.success(response.message)
					this.queryForm()
					return
				})
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped></style>
